<template>
  <div>
    <div class="content">
      <h3 class="title">概述</h3>
      <p>可将一片区域，分割为可以拖拽调整宽度的两部分区域。</p>
      <h3 class="title">代码示例</h3>
    </div>
    <ExampleCode title="基础用法">
      <template slot="left">
        <JSplit>
          <div slot="left">我是左边</div>
          <div slot="right">我是右边</div>
        </JSplit>
      </template>
      <template slot="right">
        <BaseSplit class="markdown-body"></BaseSplit>
      </template>
    </ExampleCode>
    <ExampleCode title="通过v-model双向绑定面板的位置">
      <template slot="left">
        <JSplit v-model="value1">
          <div slot="left">我是左边</div>
          <div slot="right">我是右边</div>
        </JSplit>
      </template>
      <template slot="right">
        <ModelSplit class="markdown-body"></ModelSplit>
      </template>
    </ExampleCode>
    <ExampleCode title="最大阈值max 最小阈值min">
      <template slot="left">
        <JSplit v-model="value" :min="0.1" :max="0.5">
          <div slot="left">我是左边</div>
          <div slot="right">我是右边</div>
        </JSplit>
      </template>
      <template slot="right">
        <ValueSplit class="markdown-body"></ValueSplit>
      </template>
    </ExampleCode>
    <div class="content">
      <h3 class="title">API</h3>
      <ApiSplit class="markdown-body"></ApiSplit>
    </div>
  </div>
</template>
<script>
import BaseSplit from '../md/split/base-split.md'
import ModelSplit from '../md/split/value-split.md'
import ValueSplit from '../md/split/model-split.md'
import ApiSplit from '../md/split/api-split.md'
export default {
  name: 'Split',
  data () {
    return {
      value1: 0.9,
      value: 0.2
    }
  },
  components: {
    BaseSplit,
    ModelSplit,
    ValueSplit,
    ApiSplit
  }
}
</script>

<style scoped>
   .content {
    margin-bottom: 20px;
  }
  .content .title{
    font-size: 20px;
    font-weight: 400;
    margin: 12px 0;
  }
</style>
